<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %> <%-- 导入User类，用于处理用户信息 --%> <%@ page
import="bean.User" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>个人资料</title>
		<style>
			/* 页面基本样式 - 设置字体和背景色 */
			body {
				font-family: Arial, sans-serif;
				margin: 0;
				padding: 20px;
				background-color: #f5f5f5;
			}

			/* 个人资料容器 - 居中显示，带有阴影效果 */
			.profile-container {
				max-width: 800px;
				margin: 0 auto;
				background-color: white;
				padding: 20px;
				border-radius: 8px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			/* 个人资料头部 - 居中显示 */
			.profile-header {
				text-align: center;
				margin-bottom: 30px;
			}

			/* 个人头像 - 圆形显示，固定尺寸 */
			.profile-image {
				width: 150px;
				height: 150px;
				border-radius: 50%;
				object-fit: cover;
				margin-bottom: 20px;
			}

			/* 上传表单 - 设置间距 */
			.upload-form {
				margin: 20px 0;
			}

			/* 上传按钮 - 绿色背景，白色文字 */
			.upload-btn {
				background-color: #4caf50;
				color: white;
				padding: 10px 20px;
				border: none;
				border-radius: 4px;
				cursor: pointer;
			}

			/* 消息提示 - 成功和错误状态 */
			.message {
				padding: 10px;
				margin: 10px 0;
				border-radius: 4px;
			}

			/* 成功消息样式 - 绿色背景 */
			.success {
				background-color: #dff0d8;
				color: #3c763d;
			}

			/* 错误消息样式 - 红色背景 */
			.error {
				background-color: #f2dede;
				color: #a94442;
			}

			/* 信息项容器 */
			.profile-info {
				margin-top: 20px;
			}

			/* 信息项样式 - 带有底部边框 */
			.info-item {
				margin: 10px 0;
				padding: 10px;
				border-bottom: 1px solid #eee;
			}

			/* 信息标签样式 - 加粗显示 */
			.info-label {
				font-weight: bold;
				color: #666;
			}
		</style>
	</head>
	<body>
		<!-- 个人资料主容器 -->
		<div class="profile-container">
			<div class="profile-header">
				<h1>个人资料</h1>
				<% // 获取用户信息，如果未登录则重定向到登录页面 
				User user =(User) session.getAttribute("user"); 
				if (user == null) { //用户未登录，重定向到登录页面 
					response.sendRedirect("login.jsp");
				return; 
			} // 获取头像路径，如果没有则使用默认头像 String profile90Image =
				profileImage = (String) session.getAttribute("profileImage"); if
				(profileImage == null) { profileImage =
				"img/default-avatar.png"; // 默认头像 } %>

				<!-- 显示用户头像 -->
				<img
					src="<%= profileImage %>"
					alt="个人头像"
					class="profile-image"
				/>

				<!-- 头像上传表单 - 使用multipart/form-data支持文件上传 -->
				<form
					action="ProfileServlet"
					method="post"
					enctype="multipart/form-data"
					class="upload-form"
				>
					<!-- 文件选择输入框 - 限制只能选择图片文件 -->
					<input
						type="file"
						name="profileImage"
						accept="image/*"
						required
					/>
					<br />
					<button type="submit" class="upload-btn">上传头像</button>
				</form>

				<% // 显示操作结果消息 
				String message = (String)request.getAttribute("message"); 
				String error = (String)request.getAttribute("error"); // 显示成功消息（如果有） 
				if(message != null) { 
				%>
				<div class="message success"><%= message %></div>
				<% } // 显示错误消息（如果有） if (error != null) { %>
				<div class="message error"><%= error %></div>
				<% } %>
			</div>

			<!-- 显示用户详细信息 -->
			<div class="profile-info">
				<!-- 用户名信息 -->
				<div class="info-item">
					<span class="info-label">用户名：</span>
					<span><%= user.getUsername() %></span>
				</div>
				<!-- 邮箱信息 -->
				<div class="info-item">
					<span class="info-label">邮箱：</span>
					<span><%= user.getEmail() %></span>
				</div>
				<!-- 注册时间信息 -->
				<div class="info-item">
					<span class="info-label">注册时间：</span>
					<span><%= user.getRegisterTime() %></span>
				</div>
			</div>
		</div>
	</body>
</html>
